<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
		  <view slot="back" class='tn-custom-nav-bar__back'
		    @click="goBack">
		    <text class='icon tn-icon-left'></text>
		    <text class='icon tn-icon-home-capsule-fill'></text>
		  </view>
		</tn-nav-bar>
		
		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  
		  <view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
		  	<input placeholder="姓名" v-model="name" name="input" placeholder-style="color:#AAAAAA" ></input>
		  </view>
		  <view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
			<input placeholder="身份证号码" v-model="idCard" name="input" placeholder-style="color:#AAAAAA" ></input>
		  </view>
		  
		  <view class="tn-flex tn-footerfixed">
		    <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
		      <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold @click="startIdt" >
		        <text class="tn-color-black">提交认证</text>
		      </tn-button>
		    </view>
		  </view>
		  
		</view>
		
		<web-view v-if="showPro" :src="src" @message="handleMessage" ></web-view>
	</view>
</template>

<script>
	import request from '@/common/request.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		mixins: [template_page_mixin],
		data() {
			return {
				src:"",
				name:'',
				idCard:'',
				token:'',
				showPro:false
			}
		},
		onLoad() {
			this.checkAuth()
		},
		methods: {
			checkAuth(){
				let user = uni.getStorageSync("userInfo");
				let _t = this
				if(user.ifAuth){
					uni.showModal({
						content:"您已实名认证成功!",
						complete() {
							_t.goBack();
						}
					})
				}
			},
			startIdt(){
				
				if(this.name.length < 1){
					uni.showToast({
						title:"名称错误",
						icon:"error"
					})
					return false
				}
				
				const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(!idCardRegex.test(this.idCard)){
					uni.showToast({
						title:"身份证格式错误",
						icon:"error"
					})
					return false
				}
				
				
				this.initSrc()
			},
			initSrc(){
				request.post("friend/wx/personal/getAccessToken",{name:this.name,idCard:this.idCard}).then(res=>{
					let _data = res[1]['data']
					if(_data.code == 20000){
						this.showPro = true
						this.token = _data.data
						let token = _data.data
						const successUrl = encodeURIComponent('https://app.xjjxlove.com/baidu/tmp/success.html');
						const failedUrl = encodeURIComponent('https://app.xjjxlove.com/baidu/tmp/fail.html');
						this.src = `https://h5-faceverify-plus.baidu.com/face/print/statement/statement?token=${token}&successUrl=${successUrl}&failedUrl=${failedUrl}`;
					}else{
						uni.showModal({
							content:_data.msg,
							icon:"error"
						})
					}
				})
			},
			handleMessage(res){
				let a = 3
				if(res){
					if(res.detail.data[0].action == "success"){
						// 更新缓存
						let user = uni.getStorageSync("userInfo");
						user.ifAuth = true
						uni.setStorageSync("userInfo", user)
						
						a = 1
						
					}else if(res.detail.data[0].action == "fail"){
						console.log("认证失败")
						a = 0
					}else{
						console.log("#######")
					}
				}
				
				if(a==0 || a == 1){
					request.post("friend/wx/personal/realNameAuth",{name:this.name,idCard:this.idCard, authResult:a,verifyToken:this.token})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 胶囊*/
	.tn-custom-nav-bar__back {
	  width: 100%;
	  height: 100%;
	  position: relative;
	  display: flex;
	  justify-content: space-evenly;
	  align-items: center;
	  box-sizing: border-box;
	  background-color: rgba(0, 0, 0, 0.15);
	  border-radius: 1000rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.5);
	  color: #FFFFFF;
	  font-size: 18px;
	  
	  .icon {
	    display: block;
	    flex: 1;
	    margin: auto;
	    text-align: center;
	  }
	  
	  &:before {
	    content: " ";
	    width: 1rpx;
	    height: 110%;
	    position: absolute;
	    top: 22.5%;
	    left: 0;
	    right: 0;
	    margin: auto;
	    transform: scale(0.5);
	    transform-origin: 0 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    opacity: 0.7;
	    background-color: #FFFFFF;
	  }
	}
  .template-mine {
    max-height: 100vh;
  }
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  }
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      flex-basis: 5%;
      width: 100rpx;
      position: absolute;
    }
  }
  /* 自定义导航栏内容 end */
</style>
